<template>

	<el-row :gutter="10">
		<el-col :span="4">
			<count-user :data="info" />
		</el-col>
		<el-col :span="4">
			<count-views :data="info" />
		</el-col>
		<el-col :span="4">
			<count-paid :data="info" />
		</el-col>
		<el-col :span="4">
			<count-effect :data="info" />
		</el-col>
		<el-col :span="4">
			<div class="count-sales">
				<div class="card">
					<div class="card__header">
						<span class="label">在线设备数 </span>
					</div>

					<div class="card__container">
						<cl-number :value="info?.onlineDevice" class="num" />
					</div>


				</div>
			</div>
		</el-col>

		<el-col :span="4">
			<div class="count-sales">
				<div class="card">
					<div class="card__header">
						<span class="label">离线设备数 </span>
					</div>

					<div class="card__container">
						<cl-number :value="info?.offlineDevice" class="num" />
					</div>


				</div>
			</div>
		</el-col>

	</el-row>


	<cl-crud ref="Crud">
		<cl-row>
			<!-- 刷新按钮 -->
			<cl-refresh-btn />
			<!-- 新增按钮 -->
			<cl-add-btn />
			<!-- 删除按钮 -->
			<cl-multi-delete-btn />
			<el-button type="success" plain size="small" @click="openSendMs">发送MQTT</el-button>
			<cl-flex1 />
			<!-- 条件搜索 -->
			<cl-search ref="Search" />
		</cl-row>

		<cl-row>
			<!-- 数据表格 -->
			<cl-table ref="Table">

				<template #column-code="{ scope }">{{ scope.row.name }}</template>
				<template #op="{ scope }">
					<el-button type="primary" size="small" @click="sendMs(scope.row)">发送MQTT</el-button>
				</template>
			</cl-table>
		</cl-row>

		<cl-row>
			<cl-flex1 />
			<!-- 分页控件 -->
			<cl-pagination />
		</cl-row>

		<!-- 新增、编辑 -->
		<cl-upsert ref="Upsert" />
	</cl-crud>
</template>

<script lang="ts" setup>
defineOptions({
	name: "device-device",
});

import { useCrud, useTable, useUpsert, useSearch } from "@cool-vue/crud";
import { useCool } from "/@/cool";
import { useI18n } from "vue-i18n";
import { reactive, ref } from "vue";
import UserSelect from "/$/user/components/user-select.vue";
import { ElMessageBox } from "element-plus";


const info = ref()
 

const { service } = useCool();
const { t } = useI18n();


service.base.sys.info.info().then((res) => {
	console.log("resresresresres", res);
	info.value = res;

});

// 选项
const options = reactive({
	deviceStatus: [
		{ label: t("未激活"), value: 0 },
		{ label: t("在线"), value: 1 },
		{ label: t("离线"), value: 2 },
	],
});

// cl-upsert
const Upsert = useUpsert({
	items: [
		{
			label: t("设备编号"),
			prop: "deviceNo",
			component: { name: "el-input", props: { clearable: true } },
			span: 12,
			required: true,
		},
		{
			label: t("设备状态"),
			prop: "deviceStatus",
			component: {
				name: "el-radio-group",
				options: options.deviceStatus,
			},
			value: 0,
			required: true,
		},
		{
			label: t("最后在线时间"),
			prop: "lastOnlineTime",
			component: {
				name: "el-date-picker",
				props: { type: "datetime", valueFormat: "YYYY-MM-DD HH:mm:ss" },
			},
			span: 12,
		},
		{
			label: t("选择用户"),
			prop: "userId",
			component: { vm: UserSelect },
			required: true,
		},
	],
});

// cl-table
const Table = useTable({
	columns: [
		{ type: "selection" },
		{ label: t("设备编号"), prop: "deviceNo", minWidth: 120 },
		{
			label: t("设备状态"),
			prop: "deviceStatus",
			minWidth: 120,
			dict: options.deviceStatus,
		},
		{
			label: t("最后在线时间"),
			prop: "lastOnlineTime",
			minWidth: 170,
			sortable: "custom",
			component: { name: "cl-date-text" },
		},
		{
			label: t("创建时间"),
			prop: "createTime",
			minWidth: 170,
			sortable: "desc",
			component: { name: "cl-date-text" },
		},
		{
			label: t("更新时间"),
			prop: "updateTime",
			minWidth: 170,
			sortable: "custom",
			component: { name: "cl-date-text" },
		},
		{ type: "op", buttons: ["edit", "delete"] },
	],
});

// cl-search
const Search = useSearch();

// cl-crud
const Crud = useCrud(
	{
		service: service.device.device,
	},
	(app) => {
		app.refresh();
	},
);

// 刷新
function refresh(params?: any) {
	Crud.value?.refresh(params);
}

function openSendMs() {
	ElMessageBox.prompt('请输入设备号', '发送MQTT', {
		confirmButtonText: '下一步',
		cancelButtonText: '取消',
		inputPlaceholder: '设备编号，如 12345',
	}).then(({ value: deviceNo }) => {
		ElMessageBox.prompt('请输入 ms 值', '发送MQTT', {
			confirmButtonText: '发送',
			cancelButtonText: '取消',
			inputPlaceholder: '例如 20',
			inputPattern: /^\d+$/, inputErrorMessage: '必须为数字',
		}).then(async ({ value }) => {
			await service.request('POST', '/admin/device/device/sendMs', {
				deviceNo,
				ms: Number(value),
			});
			ElMessage.success('发送成功');
		}).catch(() => {});
	}).catch(() => {});
}

function sendMs(row: any) {
	ElMessageBox.prompt('请输入 ms 值', '发送MQTT到设备 ' + row.deviceNo, {
		confirmButtonText: '发送',
		cancelButtonText: '取消',
		inputPlaceholder: '例如 20',
		inputPattern: /^\d+$/, inputErrorMessage: '必须为数字',
	}).then(async ({ value }) => {
		await service.request('POST', '/admin/device/device/sendMs', {
			deviceNo: row.deviceNo,
			ms: Number(value),
		});
		ElMessage.success('发送成功');
	}).catch(() => {});
}
</script>
